<html>
<head>
	<script type="text/javascript" src="../yui/build/yuiloader/yuiloader-beta-min.js"></script>

	<script>
	function initLoader() {
		//instantiate Loader:  
		var loader = new YAHOO.util.YUILoader();  
		 
		//identify the components you want to load:  
		loader.require("container", "dom", "event", "treeview", "animation", "menu", "logger");  

		//configure Loader by setting any of its  
		//configuration properties:  
		loader.loadOptional = true;  
		 
		//Load the files using the insert(callback)  
		//method. Your callback will be executed once  
		//all your required files are loaded.  
		loader.insert(function() {  
			//this is your callback function; you can use  
			//this space to call all of your instantiation  
			//logic for the components you just loaded.  
		});
	}
	initLoader();
	
	var tree;
	function treeInit() {
		var myLogReader = new YAHOO.widget.LogReader();
		
		tree = new YAHOO.widget.TreeView("myTreeview");
		
		var root = tree.getRoot();
		
		var myData ;
		
		// Set labelElId via myData has problem, so set it again
		myData = { label: "mylabel1", labelElId: "myid1", href: "http://www.google.com", target: "_blank" } ;
		var myNode1 = new YAHOO.widget.TextNode(myData, root, false);
		myNode1.labelElId = "myid1";
		
		myData = { label: "mylabel11", labelElId:"myid11" } ;
		var myNode11 = new YAHOO.widget.TextNode(myData, myNode1, false);
		
		myData = { label: "mylabel12", labelElId:"myid12" } ;
		var myNode12 = new YAHOO.widget.TextNode(myData, myNode1, false);
		myData = { label: "mylabel121", labelElId:"myid121" } ;
		var myNode121 = new YAHOO.widget.TextNode(myData, myNode12, false);
		myData = { label: "mylabel122", labelElId:"myid122" } ;
		var myNode122 = new YAHOO.widget.TextNode(myData, myNode12, false);
		
		myData = { label: "mylabel2", labelElId:"myid2", href: "http://www.google.com", target: "_blank" } ;
		var myNode2 = new YAHOO.widget.TextNode(myData, root, false);
		myNode2.labelElId = "myid2";
		
		myData = { label: "mylabel21", labelElId:"myid21" } ;
		var myNode21 = new YAHOO.widget.TextNode(myData, myNode2, false);
		
		myData = { label: "mylabel22", labelElId:"myid22" } ;
		var myNode22 = new YAHOO.widget.TextNode(myData, myNode2, false);
		
		// Expand and collapse happen prior to the actual expand/collapse,
		// and can be used to cancel the operation
		tree.subscribe("expand", function(node) {
			// return false to cancel the expand
			// return false;
		});
		tree.subscribe("collapse", function(node) {
			// return false to cancel the collapse
			// return false;
		});
		// Trees with TextNodes will fire an event for when the label is clicked:
		tree.subscribe("labelClick", function(node) {
			//alert("Hello " + node.labelElId + "!");
			alert("Hello " + node.labelId + "!");
			// return false to cancel the click
			// return false;
		});

		tree.draw();
		
		////////////////////////////////////////////////////////////////////////
		// Context Menu
		////////////////////////////////////////////////////////////////////////
		
		var myContextMenu1 = [									
			{ text: "menuitem11",
			  submenu: { id: "menuitem11", itemdata: [
					{ text: "menuitem111" }, 
					{ text: "menuitem112"},
					{ text: "menuitem113"}
					] } },
			{ text: "menuitem12", onclick : {fn: onMenuItemClick, obj: "menuitem12"}},
			{ text: "menuitem13", onclick : {fn: onMenuItemClick, obj: "menuitem13"} }
		];
		
		var myContextMenu2 = [
			{ text: "menuitem21",
			  submenu: { id: "menuitem21", itemdata: [
					{ text: "menuitem211" }, 
					{ text: "menuitem212"},
					{ text: "menuitem213"}
					] } },
			{ text: "menuitem22", onclick : {fn: onMenuItemClick, obj: "menuitem22"} },
			{ text: "menuitem23", onclick : {fn: onMenuItemClick, obj: "menuitem23"} }
		];
		
		function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
			YAHOO.log(p_oValue, "info");
		}
		
		function generateContextMenu(id, trigger, itemdata) {
			// Instantiate the context menu for use with nodes in the tree
			var oConfig = {
				trigger: trigger,
				itemdata: itemdata,
				zIndex:10000,
				lazyload: true,
				effect: { 
					effect: YAHOO.widget.ContainerEffect.FADE,
					duration: 0.1
				}
			};
			var oContextMenu = new YAHOO.widget.ContextMenu(id, oConfig);

			// Render the menu
			//oContextMenu.render();
			// Listen for right-clicks on tree
			//oContextMenu.triggerContextMenuEvent.subscribe(onContextMenuRender);
			
			function onContextMenuRender(p_sType, p_aArgs) {
				YAHOO.log(oContextMenu.contextEventTarget.id, "info");
			}
			oContextMenu.renderEvent.subscribe(onContextMenuRender);
		}
		
		generateContextMenu("myContextMenu1", "myid1", myContextMenu1);
		generateContextMenu("myContextMenu2", "myid2", myContextMenu2);
	}
	</script>

</head>
<body onload="treeInit()" class="yui-skin-sam">
	<div id="myTreeview"></div>
</body>
</html>
